<template>
  <!-- 所有成员 子页面 -->
  <div>
        <!-- 操作区域 -->
        <upper-template
          @search="searchForm.page=1,searchFunc()"
          @clear="
            (searchForm.dictItemCode = ''), (searchForm.dictItemName = '')
          "
        >
          <!-- 操作按钮区 -->
          <template slot="buttonArea">
            <el-button @click="viewFunc">查看</el-button>
          </template>
          <!-- 搜索区 -->
          <template slot="searchArea">
            <el-form
              :model="searchForm"
              ref="searchForm"
              label-width="100px"
              label-position="left"
              size="mini"
            >
              <el-form-item label="编码：">
                <el-input v-model="searchForm.dictItemCode" placeholder="请输入编码"></el-input>
              </el-form-item>
              <el-form-item label="名称：">
                <el-input v-model="searchForm.dictItemName" placeholder="请输入名称"></el-input>
              </el-form-item>
            </el-form>
          </template>
          <!-- 显示隐藏区 -->
          <template slot="columnHide">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in textData"
                :label="item.label"
                :disabled="item.checkDisabled"
                :key="item.prop"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </upper-template>
        <div style="
          height: 310px;
          overflow: auto;
          overflow-x: hidden;
          margin-bottom: 20px;
        ">
        <el-table ref="multipleTable"
          height="270px"
         @row-click="rowClick"
         :data="tableData" style="width: 100%;">
          <el-table-column width="55" type="selection"></el-table-column>
          <el-table-column
            v-for="(item, key) in showData"
            :key="key"
            :prop="item.prop"
            :label="item.label"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minwidth"
          ></el-table-column>
        </el-table>
         </div>
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-size="searchForm.size"
          @refresh="searchFunc"
          :total="total"
        ></pagination>
     
     
      <div style="display:flex;justify-content:center;margin-top:20px;margin-bottom:16px;">
        <el-button @click="selectData">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>


    <!-- 查看的弹框 -->
    <el-dialog
      v-dialogDrag
      title="查看成员"
      :visible.sync="addOrEdit"
      append-to-body
      width="40%"
      top="2%"
      label-width="100px"
    >
      <el-form
        :model="viewForm"
        ref="viewForm"
        label-width="100px"
        label-position="left"
        size="mini"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码: ">
              <el-input readonly v-model="viewForm.dictItemCode" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称: ">
              <el-input readonly v-model="viewForm.dictItemName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否叶子: ">
              <el-select disabled v-model="viewForm.isLeaf" style="width: 100%">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述：">
              <el-input readonly v-model="viewForm.descn" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrEdit = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 查看的弹框 -->
  </div>
</template>
<script>
import { ruleDefinition } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue";
import ruleDefComponents from "@/components/ca/ruleDefComponents";
export default {
  name: "allMembers",
  components: {
    upperTemplate,
    ruleDefComponents
    // pagination,
  },
  props: {
    dictCode: {
      type: String,
      default: ""
    },
    indexItems: {
      type: Number,
      default: 0
    },
     //选中的值
    itemData:{
      type:Array,
      default:()=>[],
    }
  },
  data() {
    return {
      total: 0,
      viewForm: {
        dictItemCode: "",
        dictItemName: "",
        isLeaf: "",
        descn: ""
      },
      checkList: [],
      addOrEdit: false, // 新增/编辑/查看弹窗
      isConfigDialog: false, // 配置层级弹窗
      searchForm: {
        dictItemName: "",
        dictItemCode: "",
        page: 1,
        size: 15
      },
      // 完整表头字段&&列属性配置
      textData: [
        {
          prop: "dictItemCode",
          label: "编码",
          sortable: true,
          align: "center",
          checkDisabled: true
        },
        {
          prop: "dictItemName",
          label: "名称",
          sortable: true,
          checkDisabled: true
        },
        {
          prop: "descn",
          label: "描述",
          checkDisabled: false
        }
      ],
      // 获取table的数据
      tableData: [],
      // 口径层级配置表格列配置
    };
  },
  created() {
    this.checkListInit();
  },
  computed: {
    // 展示字段
    showData() {
      let arr = this.textData.map(v => {
        return v.label;
      });
      let valArr = [],
        showData = [];
      // 选中的字段排序
      arr.forEach(element => {
        let flag = false;
        this.checkList.forEach(e => {
          if (e == element) {
            flag = true;
          }
        });
        if (flag) {
          valArr.push(element);
        }
      });
      // 控制表列隐藏显示
      for (let i = 0; i < this.checkList.length; i++) {
        for (let j = 0; j < this.textData.length; j++) {
          if (this.textData[j].label == valArr[i]) {
            let item = { ...this.textData[j] };
            showData.push(item);
          }
        }
      }
      return showData;
    }
  },
  mounted() {
    // this.init();
  },
  watch: {},
  methods: {
    rowClick(row){
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    init() {
      this.searchFunc();
    },
    selectData() {
      console.log(this.indexItems, "this.indexItems");
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      let params = {
        selectionFlag: "2", // 成员
        row: selection[0],
        index: this.indexItems
      };
      // 获取选中的数据
      this.$emit("selectDataFunc", params);
    },
    cancel() {
      this.$emit("selectDataFunc", "");
    },
    // 获取表格数据
    checkListInit() {
      this.checkList = this.textData.map(v => {
        return v.label;
      });
    },
    searchFunc() {
      let params = {
        dictCode: this.dictCode,
        dictItemCode: this.searchForm.dictItemCode,
        dictItemName: this.searchForm.dictItemName,
        page: this.searchForm.page,
        size: this.searchForm.size
      };
      ruleDefinition
        .dimDictitemQueryByRelatedDicttypeCode(params)
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.total = res.count;

            //这一步给选择框  给定选中状态 
            let selecteds = this.itemData; 
            if (selecteds.length>0 ) {  
              for (let i = 0; i < selecteds.length; i++) {
                 console.log(selecteds[i], "选中的数据");
                if(selecteds[i]){
                for (let j = 0; j < this.tableData.length; j++) {
                  if (selecteds[i] == this.tableData[j].dictItemCode) {
                      console.log( this.tableData[j], "选中的数据2");
                      this.$nextTick(()=>{
                          this.$refs.multipleTable.toggleRowSelection(this.tableData[j],true);
                      })
                    break;
                  }
                }
                }
              }
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    viewFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行查看");
      }
      let row = selection[0];
      let form = {
        dictItemCode: row.dictItemCode,
        dictItemName: row.dictItemName,
        isLeaf: row.isLeaf,
        descn: row.descn
      };
      this.viewForm = form;
      this.addOrEdit = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchForm.size = val;
      this.searchFunc();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      console.log(`当前页: ${val}`);
      this.searchFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>